// 轮播业务
(function() {
	// 获取操作对象
	let oBannerSList = document.querySelector('.bannerS-list');
	let oNumber = document.querySelector(".number");

	// 请求轮播数据
	yzb.ajax({
		url: BASE_URL + '/api_banner',
		data: {
			bannerId: 1
		},
		success(res) {
			// 验证
			if (res.code != 0) {
				console.log(res);
				return;
			};
			// 轮播项
			let strLi = '';
			// 序号
			let strSpan = '';
			res.data.forEach(item => {
				// 累加至数据结构
				strLi += `
	 <li><a href="goods.html?goodsId=${item.goods_id}&catId=${item.cat_id}"><img src="${item.goods_thumb}" alt=""/></a></li>
 `;
				strSpan += '<span></span>';
			});

			// 添加至页面
			oBannerSList.innerHTML = strLi;
			oNumber.innerHTML = strSpan;

			// 添加之后做轮播效果
			banner()
		}
	});

	function banner() {
		// 获取操作对象
		let oSdiv = document.querySelector(".sdiv");
		let oNext = document.querySelector('.next');
		let oPrev = document.querySelector('.prev');
		let oBannerSList = document.querySelector(".bannerS-list");
		let aLi = document.querySelectorAll(".bannerS-list li");
		let oNumber = document.querySelector('.number');
		let aSpan = oNumber.querySelectorAll('.number span');

		// 障眼法 把第一张和点克隆到最后  querySelector选择器只会获取一次长度
		oBannerSList.appendChild(aLi[0].cloneNode(true));

		// 设置ul宽度
		oBannerSList.style.width = (aLi.length + 1) * aLi[0].offsetWidth + "px";

		// 全局信号量
		let n = 0;
		// 圆点
		let m = 0;
		// 锁
		let lock = false;
		//下一页动画
		oNext.onclick = function() {
			// 节流
			if (lock) return
			lock = true;
			rightBtn();
		}

		// 上一张
		oPrev.onclick = function() {
			// 节流
			if (lock) return
			lock = true;
			n--;
			m--;
			if (n < 0) {
				n = aLi.length;
				m = n - 1;
				oBannerSList.style.transition = "none";
				oBannerSList.style.left = n * -1000 + "px";
				n--
			};
			for (let i = 0; i < aSpan.length; i++) {
				aSpan[i].style.background = "#ccc";
			};
			aSpan[m].style.background = "#666";

			setTimeout(function() {
				oBannerSList.style.transition = ".5s";
				oBannerSList.style.left = n * -1000 + "px";
			})
		}
		// 批量监听小圆点点击事件
		for (let i = 0; i < aSpan.length; i++) {
			aSpan[i].onclick = function() {
				m = i;
				if (lock) return;
				lock = true;
				n = m;
				n = n > aSpan.length - 1 ? 0 : n;

				oBannerSList.style.transition = ".5s";
				oBannerSList.style.left = n * -1000 + "px";

				for (let i = 0; i < aSpan.length; i++) {
					aSpan[i].style.background = "#ccc";
				};
				aSpan[n].style.background = "#666";

			};

		}

		// 监听过渡动画完成事件
		oBannerSList.ontransitionend = function() {
			// 开锁
			lock = false;
			if (n >= aLi.length) {
				n = 0;
				oBannerSList.style.transition = "none";
				oBannerSList.style.left = "0px";
			}
		}

		// 监听鼠标移入事件
		oSdiv.onmouseover = function() {
			clearInterval(timer)
		};

		// 监听鼠标移出事件
		oSdiv.onmouseout = function() {
			//开定时器
			timer = setInterval(rightBtn, 2000);
		};

		// 下一页方法
		function rightBtn() {
			n++;
			m++;
			m = m >= aLi.length ? 0 : m;
			// 过渡动画
			oBannerSList.style.left = n * -1000 + "px";
			oBannerSList.style.transition = ".5s";

			for (let i = 0; i < aSpan.length; i++) {
				aSpan[i].style.background = "#ccc";
			};
			aSpan[m].style.background = "#666";
		}
		let timer = setInterval(rightBtn, 2000);
	}

})();

// 热门商品业务
(function() {
	let oBaseShop = document.querySelector('.base-shop');
	let oMore = document.querySelector('.m-btn');


	// 页
	let page = 1;
	// 数量
	let pagesize = 3;
	// 默认调用一次
goodsRender(page,pagesize);

	// 点击更多
	let lock = false;
	oMore.onclick = function() {
		if(lock) return;
		lock = true;
		// 加载到下一页
		page++;
		
		goodsRender(page,pagesize);
	}


	// 封装请求数据和DOM渲染方法
	function goodsRender(page, pagesize) {
		// 获取数据
		yzb.ajax({
			url: BASE_URL + "/api_goods",
			data: {
				page,
				pagesize
			},
			success(res) {
				// 验证
				if (res.code != 0) {
					console.log(res);
					return;
				};
				// 组装结构
				res.data.forEach(item => {
					// 创建外层li
					let li = document.createElement('li');
					// 里面使用字符串赋值
					li.innerHTML = `
				<div class="base-cart-up">
					<img src="${item.goods_thumb}" alt=""/>
					<a href="goods.html?goodsId=${item.goods_id}&catId=${item.cat_id}" class="base-mask">
						<p>¥${item.price}</p>
						<p>${item.goods_name}</p>
						<p>${item.goods_desc}</p>
					</a>
				</div>
				<div class="base-cart-brand">
					<div>
						<img src="${item.brand_thumb}" />
						<span>${item.brand_name}</span>
					</div>
					<div>
						<span>${item.goods_number}</span>
						<span class="iconfont icon-aixin_shixin"></span>
					</div>
				</div>
				`;
				
				// 添加到页面
				oBaseShop.appendChild(li);
				});
				
				// 开锁
				lock = false;
			}
		})
	}
})();